<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例-监视属性实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>a的值是:{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a自加</button>
        <h3>b的值是:{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b自加</button>
    </div>
    <script>
        Vue.config.productionTip = false

        let vm = new Vue({
            el: "#root", 
            data: {
                numbers:{
                    a: 1,
                    b: 100,
                    c: {
                        d: {
                            e: 100
                        }
                    }
                }
            },
            watch: {
                //监视多级属性时要用引号
                'numbers.a': {
                    handler(newValue, oldValue) {
                        console.log('numbers.a改变了 新值：', newValue, '旧值：', oldValue)
                    }
                },
                'numbers.b': {
                    handler(newValue, oldValue) {
                        console.log('numbers.b改变了 新值：', newValue, '旧值：', oldValue)
                    }
                },
                //监听整个numbers，默认是浅监视deep=false（只监视对象引用地址是否发生改变）
                numbers: {
                    deep: true, //设置深度监视，只要numbers内部值改变，就执行handler
                    handler(newValue, oldValue) {
                        //深度监视时，通过oldValue拿不到旧值
                        console.log('numbers改变了 新值：', newValue.a, newValue.b, '旧值：', oldValue.a, newValue.b)
                        //深度监视无论多少层级都可以看到
                        console.log('e的新值:' + newValue.c.d.e)
                    }
                }
            }
        })
    </script>
</body>
</html>